<template>
    <div>
      <!-- 收藏夹部分 start -->
      <div class="procards" v-if="!ProCard">
        <div class="title">名片收藏夹</div>
        <div class="content">
          <div class="content-card" v-for="(item, index) in cardsList" :key="index">
            <el-card class="box-card" @click.native="showcollectCard(index)">
              <div slot="header" class="clearfix">
                <div style="display:inine-block;width:50%;padding-top: 10px">
                  <i class="el-icon-folder"></i>
                  <span class="title">{{item.name}}</span>
                </div>
                <div class="pro-cards-btn">
                  <el-button type="text" icon="el-icon-delete" @click.stop="delfolder(item)"></el-button>
                  <el-button type="text" icon="el-icon-star-off" @click.stop="getCollection(item)" v-if="!item.isShared"></el-button>
                  <el-button type="text" icon="el-icon-star-on" @click.stop="getCollection(item)" v-if="item.isShared"></el-button>
                </div>
              </div>
              <div style="width: 90%; display: flex; justify-content: space-between">
                <span style="display: inline-block">
                <i class="el-icon-user"></i>
                {{item.employees.length}}
                </span>
                <span class="el-icon-lock" style="display: inline-block" v-if="!item.isShared"></span>
              </div>
            </el-card>
          </div>
          <div class="content-card" @click="addfolder">
            <div class="addcard" @click="addcard()">+</div>
          </div>
        </div>
        <!-- 新增文件夹弹窗 start -->
        <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false">
          <el-form label-width="120px" :model="newfolder" :rules="rule" ref="newfolder">
            <el-form-item label="文件夹名" style="width: 100%" prop="name">
              <el-input v-model="newfolder.name" placeholder="请输入新文件夹名"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmadd(newfolder)">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 新增文件夹弹窗 end -->
      </div>
      <!-- 收藏夹部分 end -->
      <!-- 具体名片部分 start-->
      <div class="procards" v-if="ProCard" :model="proList">
        <div class="title">
          <el-button icon="el-icon-s-home" @click="returnfolder"></el-button>
          {{proList.name}}
        </div>
        <div class="content">
          <!-- 每一份名片 start -->
          <div class="pro-content-card" v-for="(item, index) in proList.employees" :key="index">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <div style="display:inine-block;width:50%;padding-top: 10px">
                  <i class="el-icon-folder"></i>
                  <span class="title">{{item.name}}</span>
                </div>
                <div class="pro-cards-btn">
                  <el-button type="text" icon="el-icon-delete" @click.stop="deletecard(item, index)"></el-button>
                  <el-button type="text" icon="el-icon-star-off" @click="shareCard(item)" v-if="!item.isShared"></el-button>
                  <el-button type="text" icon="el-icon-star-on" @click="shareCard(item)" v-if="item.isShared"></el-button>
                </div>
              </div>
              <div style="width: 100%">
                <p>公司: {{item.company}}</p>
                <p>电话：{{item.phone}}</p>
                <p>邮箱：{{item.email}}</p>
                <p>地址: {{item.address}}</p>
              </div>
            </el-card>
          </div>
          <!-- 每一份名片 end -->
          <div class="content-card">
            <div class="addcard" @click="addcard()" style="height:20vh">+</div>
          </div>
        </div>
        <!-- 添加或修改名片弹窗 start -->
        <el-dialog :visible.sync="addcardVisible" width="40%">
          <el-form :model="newcardForm" ref="newcardForm" :rules="newcardRule" label-width="120px" style="width: 90%">
            <el-form-item label="姓名" prop="name" class="font4">
              <el-input v-model="newcardForm.name" placeholder="请输入姓名" class="font5"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="phone" class="font4">
              <el-input v-model="newcardForm.phone" placeholder="请输入电话号码" class="font5"></el-input>
            </el-form-item>
            <el-form-item label="邮箱地址" prop="email" class="font4">
              <el-input v-model="newcardForm.email" placeholder="请输入邮箱地址" class="font5"></el-input>
            </el-form-item>
            <el-form-item label="联系地址" prop="address" class="font4">
              <el-input v-model="newcardForm.address" placeholder="请输入联系地址" class="font5"></el-input>
            </el-form-item>
            <el-form-item label="公司名称" prop="company" class="font4">
              <el-input v-model="newcardForm.company" placeholder="请输入公司名称" class="font5"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addcardVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmaddcard(newcardForm)">添加</el-button>
          </span>
        </el-dialog>
        <!-- 添加名片弹窗 end -->
      </div>
      <!-- 具体名片部分 end-->
    </div>
</template>

<script>
import { validatePhone, validateEMail } from '../../utils/rules'
export default {
  name: 'ProCards',
  data() {
    return {
      cardsList: [], // 名片夹列表
      dialogVisible: false, // 显示添加名片夹弹框
      addcardVisible: false, // 显示添加名片弹框
      ProCard: false, // 显示名片夹里的名片信息
      newfolder: { // 新名片夹
        name: ''
      },
      rule: { // 名片夹规则
        name: [
          { required: true, message: '新建文件夹不能为空', trigger: 'blur' }
        ]
      },
      Index: 0, // 名片夹数组里的某一个文件夹
      proList: [], // 名片列表信息
      newcardForm: { // 添加新名片
        name: '',
        phone: '',
        email: '',
        address: '',
        company: '',
        position: '',
        cardSortId: 0
      },
      newcardRule: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '电话号码不能为空', trigger: 'blur' },
          { validator: validatePhone, message: '请输入正确的电话号码', trigger: 'blur' }
        ],
        email: [
          { required: true, massage: '邮箱地址不能为空', trigger: 'blur' },
          { validator: validateEMail, message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '联系地址不能为空', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '公司名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getcardsList()
  },
  methods: {
    // 获取名片夹列表
    getcardsList() {
      this.getRequest('/cards/').then(resp => {
        if (resp) {
          this.cardsList = resp.data
        }
      }, error => console.log(error))
    },
    // 是否共享名片夹
    getCollection(item) {
      if (item.isShared === false) {
        this.$confirm(`请确定是否共享${item.name}名片夹`, '提示', {
          confirmButtonText: '共享',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          item.isShared = true
          this.putRequest(`/cards/type/${item.id}/${item.isShared}`).then(resp => {
            if (resp) {
              this.getcardsList()
              this.$forceUpdate()
              this.$message.success('成功共享名片夹')
            } else console.log('null')
          }, error => console.log(error))
        }).catch(() => {
          this.$message.info('已取消名片夹共享')
        })
      } else {
        this.$confirm(`请确定是否取消共享${item.name}名片夹`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          item.isShared = false
          this.putRequest(`/cards/type/${item.id}/${item.isShared}`).then(resp => {
            if (resp) {
              this.getcardsList()
              this.$forceUpdate()
              this.$message.success('已取消名片夹共享')
            } else console.log('null')
          }, error => console.log(error))
        })
      }
    },
    // 删除名片夹
    delfolder(item) {
      this.$confirm(`请确定是否删除${item.name}名片夹`, '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest(`/cards/${item.id}`).then(resp => {
          if (resp) {
            // console.log(resp.msg)
            this.getcardsList()
            this.$forceUpdate()
            this.$message.success('成功删除名片夹')
          }
        }, error => console.log(error))
      }).catch(() => {
        this.$message.info('已取消删除名片夹')
      })
    },
    // 显示新建名片夹弹框
    addfolder() {
      this.dialogVisible = true
    },
    // 确定新建名片夹
    confirmadd(form) {
      this.$refs.newfolder.validate((valid) => {
        if (valid) {
          this.postRequest('/cards/?name=' + form.name).then(resp => {
            if (resp) {
              // console.log(resp.msg)
              this.dialogVisible = false
              this.getcardsList()
              this.$forceUpdate()
              this.$message.success('新建名片夹成功')
            }
          }, error => console.log(error))
        }
      })
    },
    // 打开指定名片夹，获取具体的名片信息
    showcollectCard(index) {
      this.ProCard = true
      this.Index = index
      this.proList = this.cardsList[this.Index] // 打开的名片夹
    },
    // 返回上一级名片夹
    returnfolder() {
      this.ProCard = false
    },
    // 删除名片
    deletecard(item, index) {
      this.$confirm(`请确定是否删除${item.name}的名片`, '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest(`/cards/info/${item.id}`).then(resp => {
          if (resp) {
            this.getcardsList()
            this.proList = this.cardsList[this.Index]
            this.$message.success(`${item.name}的名片删除成功`)
            this.$forceUpdate()
          }
        }, error => console.log(error))
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 添加名片
    addcard() {
      this.addcardVisible = true
      this.newcardForm = {
        name: '',
        phone: '',
        email: '',
        address: '',
        company: '',
        position: '',
        cardSortId: this.proList.id
      }
    },
    // 确认添加名片
    confirmaddcard(form) {
      var that = this
      this.$refs.newcardForm.validate((valid) => {
        if (valid) {
          this.postRequest('/cards/info', form).then(resp => {
            if (resp) {
              this.getcardsList()
              // this.showcollectCard(this.Index)
              this.addcardVisible = false
              this.ProCard = false
              this.$forceUpdate()
            }
          }, error => console.log(error))
        }
      })
    },
    // 分享名片
    shareCard(item) {
      if (item.isShared === false) {
        this.$confirm(`请确定是否共享${item.name}名片`, '提示', {
          confirmButtonText: '共享',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          item.isShared = true
          this.putRequest(`/cards/info/${item.id}/${item.isShared}`).then(resp => {
            if (resp) {
              // console.log(resp.msg)
              // this.getcardsList()
              // this.proList = this.cardsList[this.Index]
              this.$message.success(`${item.name}名片共享成功`)
              this.$forceUpdate()
            }
          }, error => console.log(error))
        }).catch(() => {
          this.$message.info('已取消共享')
        })
      } else {
        this.$confirm(`请确定是否取消共享${item.name}名片`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          item.isShared = false
          this.putRequest(`/cards/info/${item.id}/${item.isShared}`).then(resp => {
            if (resp) {
              // console.log(resp.msg)
              // this.getcardsList()
              // this.proList = this.cardsList[this.Index]
              this.$message.success(`${item.name}名片取消共享`)
              this.$forceUpdate()
            }
          }, error => console.log(error))
        })
      }
    }
  }
}
</script>

<style scoped>
@import '../../assets/css/form.css';
/**======================== 收藏整体布局====================== */
.procards {
  width: 100%;
  height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  /* background-color: cadetblue; */
}
/**========================== 收藏头部标题 ==================================== */
.procards .title {
  width: 96%;
  height: 7%;
  font: 2vw '宋体';
  font-weight: bolder;
  padding-top: 2vh;
  border-bottom: 1px solid #DEE1E6;
}
/**返回按钮 */
.procards .title .el-button {
  border: none;
  padding: 0px;
  font-size: 30px;
}
/**=========================== 收藏中心区域 ======================================== */
.procards .content {
  width: 104%;
  height: 84%;
  padding: 0px !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  /* background-color: cadetblue; */
}
/**======================== 收藏夹el-card 外部 div样式 ==================================== */
.procards .content .content-card {
  display: inline-block;
  width: 20%;
  height: 15vh;
  margin-left: 4%;
  margin-top: 2%;
}
/**======================== 收藏夹el-card 样式 start ==================================== */
/** 收藏夹 el-card 样式 */
.procards .content .box-card {
  width: 96%;
  height: 15vh;
}
.procards .content .box-card:hover {
  cursor: pointer;
}
/** 头部样式 */
.procards .content .box-card /deep/ .el-card__header {
  width: 100%;
  padding: 10px;
  padding-bottom: 0px;
  /* background-color: #606266; */
}
.procards .content .box-card /deep/ .clearfix {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
/** 头部中 title 样式 */
.procards .content .box-card .clearfix .title{
  display: inline-block;
  margin: 0px;
  padding: 0px;
  font: 1vw '宋体';
  color: #606266;
  border: none;
  width: 80%;
  height: 2vh;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* background-color: aqua; */
}
/** 头部中 el-button 样式 */
.pro-cards-btn {
  display: inline-block;
  justify-items: flex-end;
  width: 40%;
  padding-left: 2vw;
  /* background-color: aqua; */
}
.pro-cards-btn .el-button {
  display: inline-block;
  width: 40%;
  margin: 0px;
}
/**======================== 收藏夹el-card 样式 end ==================================== */
/** =================== 添加 名片/名片夹 el-card 样式 start ============================== */
.procards .content .addcard {
  width: 96%;
  height: 15vh;
  border: 1px dotted rgba(222,225,230);
  border-radius: 5px;
  font-size: 6vw;
  color: rgba(222,225,230);
  text-align: center;
}
.procards .content .addcard:hover {
  cursor: pointer;
}
/** =================== 添加 名片/名片夹 el-card 样式 end ============================== */
/**================= 名片el-card 的样式 start ======================== */
.procards .content .pro-content-card {
  display: inline-block;
  width: 20%;
  height: 20vh;
  margin-left: 4%;
  margin-top: 2%;
}
/** 名片 el-card 样式 */
.procards .content .pro-content-card .box-card {
  width: 96%;
  height: 20vh !important;
}
.pro-content-card .box-card /deep/ .el-card__body {
  padding: 0px 10px !important;
}
/** 名片body > p 的样式 */
.box-card p {
  width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: wrap;
  margin: 0px;
  margin-top: 5px;
}
/**================= 名片el-card 的样式 end ======================== */
.el-icon-folder {
  color: rgba(64,158,255);
}
.el-icon-user {
  color: rgba(64,158,255);
}
</style>
